<template>
  <div>
    <div id="pie" class="pie"></div>
  </div>
</template>

<script>
import dataApi from "@/api/data";
export default {
  props:{
    city:String,
  },
  data() {
    return {
      child_city:'北京',
      items: [],
      chart: null
    };
  },
  watch:{
    city(val){
      this.child_city = val
    }
  },
  mounted() {
   this.getData();
  },
  methods: {
    selectChange(){
      this.items=[]
      this.getData()
    },
    getData() {
      this.items = dataApi.getData().then(response => {
        this.items = response.data.items;
        this.initChart();
      });
    },
    prepareData() {
      //console.log(this.child_city);
        var res = []
        var list1 = ["林地面积"],
        list2 = ["森林面积"],
        list3 = ["人工林面积"],
        list4 = ["天然林面积"];
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i]["city"] === this.child_city) {
          list1.push(Number(this.items[i]["林地面积"]));
          list2.push(Number(this.items[i]["森林面积"]));
          list3.push(Number(this.items[i]["人工林面积"]));
          list4.push(Number(this.items[i]["天然林面积"]));
        }
      }

      res.push(["Year", "2013", "2014", "2015", "2016", "2017", "2018"])
      //res.push(list1)
      res.push(list2)
      res.push(list3)
      res.push(list4)
      return res;
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("pie"));
      let option = this.setChart();
      this.chart.setOption(option);
      window.addEventListener("resize",()=>{
          this.resizeChart()
      })
    },
    setChart() {
      var myChart = this.chart;
      let option = (option = {
        title:{
          text: this.city+"森林资源情况分析图",
          subtext: "国家林草局统计年鉴",
          sublink: "#",
          left: "center",
        },
        legend: {
          right:'80',
          top: '65'
        },
        tooltip: {
          trigger: "axis",
          showContent: true
        },
        dataset: {
          source: this.prepareData()
        },
        xAxis: { type: "category" ,name:'年'},
        yAxis: { gridIndex: 0 ,name:'面积'},
        grid: { top: "55%" },
        series: [
          { type: "bar", smooth: true, seriesLayoutBy: "row" },
          { type: "bar", smooth: true, seriesLayoutBy: "row" },
          { type: "bar", smooth: true, seriesLayoutBy: "row" },
          //{ type: "bar", smooth: true, seriesLayoutBy: "row" },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            label: {
              formatter: "{b}: {@2013} ({d}%)"
            },
            encode: {
              itemName: "Year",
              value: "2013",
              tooltip: "2013"
            }
          }
        ]
      });

      myChart.on("updateAxisPointer", function(event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          var dimension = xAxisInfo.value +1;
          myChart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)"
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });

      return option;
    },
    resizeChart(){
        this.chart.resize()
    }
  }
};
</script>

<style>
.pie {
  width: 100%;
  height: calc(100vh - 100px);
}
</style>